<template>
  <div>
    <el-row>
      <h1 class="before m-b">经费信息</h1>
    </el-row>
    <el-radio-group v-model="activeName" class="m-b">
      <el-radio label="eight">8号文</el-radio>
      <el-radio label="eighteen">18号文</el-radio>
    </el-radio-group>
    <template v-if="activeName=='eight'">
      <FundEight :isShowBtn="isShowBtn" :projectId="projectId" :projectStage="projectStage" :fundEight="fundEight" @initData="initData" />
    </template>
    <template v-else>
      <fundEighteen :isShowBtn="isShowBtn" :projectId="projectId" :projectStage="projectStage" :fundEighteen="fundEighteen" @initData="initData" />
    </template>
  </div>
</template>

<script>
import FundEight from "./fundEight.vue";
import fundEighteen from "./fundEighteen.vue"

export default {
  components: {
    FundEight,
    fundEighteen
  },
  props: {
    isShowBtn: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: String,
      default: ''
    },
    projectStage: {
      type: String,
      default: ''
    },
    fundEight: {
      type: Object,
      default: () => { }
    },
    fundEighteen: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      activeName: 'eight',
    }
  },

  methods: {
    initData(val) {
      this.$emit('initData', val)
    }
  }
}
</script>

<style lang="less" scoped>
  .header {
    width: 100%;
    height: 50px;
    margin-top: 2px;
    padding-left: 25px;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #000000;

    .icon-back {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .content {
    font-size: 16px;
    background-color: #fff;

    .top_btn {
      text-align: right;
      margin: 20px 0;
    }

    .form_box {
      .lable_box {
        background: #f3f4f6;
        font-size: 16px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #000000;
        height: 50px;
        display: flex;
        align-items: center;

        .lable {
          text-align: center;
        }
      }

      .row_box {
        border: 1px solid #ebeef5;
        height: 625px;

        .row_lable {
          padding: 20px 0 20px 30px;
          height: 100%;
        }

        .row_con {
          height: 100%;
          border-left: 1px solid #ebeef5;
          padding: 20px 0 20px 0;
        }
      }
    }

    .bottom_btn {
      text-align: center;
      margin: 50px 0 20px;
    }

    ::v-deep .el-form-item {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 50px;
      height: 45px;
    }

    ::v-deep .el-form-item__content {
      width: 100%;
    }

    ::v-deep .el-tree-node__content {
      height: 45px;
    }

    ::v-deep .el-input__inner {
      height: 25px;
      line-height: 25px;
    }

    ::v-deep .el-form-item__error {
      color: #f56c6c;
      font-size: 12px;
      line-height: 1;
      padding-top: 0;
      position: absolute;
      top: 90%;
      left: 0;
    }
  }
  .header {
    position: relative;
    .saveBtn {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }
</style>
